<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="baseData">
        <!-- 基础采样单所有的字段 -->
        <el-form
          :model="SampleForm"
          status-icon
          :rules="rules2"
          ref="SampleForm"
          label-width="100px"
          class="demo-ruleForm"
          label-position="top"
        >
          <el-row type="flex" justify="left" :gutter="20">
            <el-col :span="6">
              <el-form-item label="采样单编号" prop="sampleingNo">
                <el-input
                  type="password"
                  v-model="SampleForm.sampleingNo"
                  autocomplete="off"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="监测目的" prop="ProjectName">
                <el-input
                  type="password"
                  v-model="SampleForm.ProjectName"
                  autocomplete="off"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="监测性质" prop="monitorType">
                <el-input
                  type="password"
                  v-model="SampleForm.monitorType"
                  autocomplete="off"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采样日期" prop="SamplingTime">
                <el-date-picker
                  v-model="SampleForm.SamplingTime"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
                <!-- <el-input type="password" v-model="SampleForm.SamplingTime" autocomplete="off"></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 以下字段为每种采样单独有 -->
        </el-form>
        <!-- 以下为每个表中的数据字段 -->

        <!-- 采样表单的按钮和功能 -->
        <el-row :gutter="20" type="flex" justify="left">
          <el-col :span="1">
            <el-button size="mini">添加</el-button>
          </el-col>
          <el-col :span="1">
            <el-button size="mini">删除</el-button>
          </el-col>
          <el-col :span="2">
            <el-button size="mini">个项目监测项目相同</el-button>
          </el-col>
          <el-col :span="1">
            <el-button size="mini">XXXX功能</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          size="mini"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="样品编号" align="center" width="180" prop="no"></el-table-column>
          <el-table-column label="滴定体积" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.n1"
                :controls="false"
                :precision="5"
                :min="1"
                size="small"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="XX量" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.n2"
                :controls="false"
                :precision="5"
                :min="1"
                :max="10"
                size="small"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="监测项目">
            <!-- 根据当前样品的性质 带出所有的监测项目 -->
            <template slot-scope="scope">
              <el-badge
                :value="Object.keys(scope.row.monItems).length"
                style="width:90%"
                type="primary"
              >
                <el-button
                  size="small"
                  class="btnPos"
                  @click="changeMonItem1(scope.$index, scope.row.monItems)"
                >监测项目</el-button>
              </el-badge>

              <el-dialog title="监测项目选择" :visible.sync="scope.row.dialogFormVisible1" append-to-body>
                <MonItemsForm :tagId="tableData.monTagId" :monItems.sync="scope.row.monItems"/>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="scope.row.dialogFormVisible1 = false">取 消</el-button>
                  <!-- <el-button type="primary" @click="fullSelect(scope.row.projectPlanPosDetail)">{{ btnClearName }}</el-button> -->
                  <el-button type="primary" @click="scope.row.dialogFormVisible1 = false">确 定</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
          <el-table-column label="现场监测项目">
            <!-- 根据当前样品的性质 带出所有的监测项目 -->
            <template slot-scope="scope">
              <el-badge
                :value="Object.keys(scope.row.localeMonItems).length"
                style="width:90%"
                type="primary"
              >
                <el-button
                  size="small"
                  class="btnPos"
                  @click="changeMonItem2(scope.$index, scope.row.localeMonItems)"
                >现场监测项目</el-button>
              </el-badge>

              <el-dialog title="现场监测项目" :visible.sync="scope.row.dialogFormVisible2" append-to-body>
                <MonItemsForm
                  :tagId="tableData.monTagId"
                  :monItems.sync="scope.row.localeMonItems"
                />
                <div slot="footer" class="dialog-footer">
                  <el-button @click="scope.row.dialogFormVisible2 = false">取 消</el-button>
                  <!-- <el-button type="primary" @click="fullSelect(scope.row.projectPlanPosDetail)">{{ btnClearName }}</el-button> -->
                  <el-button type="primary" @click="scope.row.dialogFormVisible2 = false">确 定</el-button>
                </div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>

        <el-row :gutter="20">
          <el-col>
            <el-button type="primary" @click="submitForm('SampleForm')">提交</el-button>
            <el-button @click="resetForm('SampleForm')">重置</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="分瓶信息" name="third">分瓶信息</el-tab-pane>
      <el-tab-pane label="打印预览" name="printer">
        <iframe class="iframe" src="http://localhost:5000/Templates/Lab/test.pdf" frameborder="0"></iframe>

        <!-- <pdf src="./Templates/Lab/test.pdf"></pdf> -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import MonItemsForm from '@/components/form/sampleMonItemsForm'
export default {
  components: { MonItemsForm },
  methods: {
    handleClick() {
      if (this.activeName === 'printer') {
        this.canPrint = true
        this.filePath = 'http://localhost:5000/Templates/'
        // this.axios.get('')
        // 获取相应的数据记录
      } else this.canPrint = false
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFieldss()
    },
    changeMonItem1(index, data) {
      this.tableData[index].dialogFormVisible1 = true
    },
    changeMonItem2(index, data) {
      this.tableData[index].dialogFormVisible2 = true
    }
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.SampleForm.checkPass !== '') {
          this.$refs.SampleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.SampleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var tabledataDD = {
      no: '1112233344',
      n1: '2016-05-02',
      n2: '王小虎',
      n3: '',
      n4: '',
      n5: '',
      n6: '',
      n7: '',
      n8: '',
      n9: '',
      monTagId: 'D877C7D5-6BB8-42D4-A79C-0F644E130A62',
      monItems: [],
      localeMonItems: [],
      dialogFormVisible1: false,
      dialogFormVisible2: false
    }
    return {
      activeName: 'baseData',
      canPrint: '',
      filePath:'',
      tableTitle: [
        { label: '样品编号', width: '', prop: 'no' },
        { label: '11', width: '', prop: 'n1' },
        { label: '22', width: '', prop: 'n2' },
        { label: '33', width: '', prop: 'n3' },
        { label: '44', width: '', prop: 'n4' },
        { label: '55', width: '', prop: 'n5' },
        { label: '66', width: '', prop: 'n6' },
        { label: '77', width: '', prop: 'n7' },
        { label: '88', width: '', prop: 'n8' },
        { label: '99', width: '', prop: 'n9' }
      ],
      tableData: new Array(1).fill(tabledataDD),
      SampleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        age: [{ validator: checkAge, trigger: 'blur' }]
      }
    }
  }
}
</script>
<style lang="stylus">
.iframe
  width 100%
  height 800px
.el-input-number
  width 100%
  height 100%
.el-button
  overflow hidden
// .el-table .cell, .el-table th div
.cell
  overflow initial !important
.projectTable
  width 100%
.btnPos
  width 100%
sup
  margin-top 5px
</style>
